const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    // 打包模式...
    mode: 'development',//开发模式
    // mode: 'development',//生产模式
    // 打包模式...
    //入口文件
    entry: {
        index: './src/js/index/index.js',
        login: './src/js/login/login.js',
        register: './src/js/register/register.js',
        // ...
    },
    //入口文件
    //出口文件
    output: {
        // 设置打包后的代码存储路径
        path: path.resolve(__dirname, 'dist'),
        // 设置打包后的文件名
        filename: 'js/[name].js'
    },
    //出口文件
    plugins: [
        htmlPlugin('index'),
        htmlPlugin('login'),
        htmlPlugin('register'),
        // ...
        //打包css
        new MiniCssExtractPlugin({
            // 打包后的 css 路径和文件名
            filename: './css/[name].css'
        })
        //打包css
    ],
    module: {
        rules: [
            //打包css
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            //打包scc
            //打包scss
            {
                test: /\.scss$/i,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            //打包scss
            // css 中的图片
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024 * 8, // 8kb 以下的图片采用 base64 进行处理
                            outputPath: './images/',  // 打包后图片的存储路径
                            esModule: false
                        }
                    }
                ]
            },
            // html 中的图片
            {
                test: /\.html$/i,
                use: ['html-withimg-loader']
            }
        ]
    },
    devServer: {
        port: 8888,
        open: true, // 启动服务器时自动打开页面
        hot: true, // 热更新
        // proxy: {
        //     '/': {
        //         target: 'http://localhost:3000'  // 后端服务器地址
        //     },
        //     //表示 webpack 项目中所有以 '/users' 或 '/students' 开头的请求都会
        //     // 被转发到 http://localhost:3000 服务器中，
        //     '/users': {
        //         target: 'http://localhost:3000'
        //     },
        //     '/students': {
        //         target: 'http://localhost:3000'
        //     },
        // }
    }
}
function htmlPlugin(filename){
    return new HtmlWebpackPlugin({
        template: `./src/${filename}.html`, // 设置要打包的源文件 HTML 的路径
        filename: `./${filename}.html`, // 设置打包后的文件路径和文件名
        chunks: [filename]  // 当前 HTML 文件中引入的 JS 的名字 
    })
}
